const name = 'Josh Perez'; // 声明常量
const element = <h1>Hello, {name}</h1>; // 引用常量和填充数据
// 对象数据（key val）
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

// 定义方法，传入user对象，返回用户的名字
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function getGreeting(user) {
  if (user) {
    return <h2>Hello, {formatName(user)}</h2>;
  }
  return <h2>没有名字</h2>;
}
//JSX防止注入攻击 ,先使用变量接收，然后使用{}引入
// const title = response.potentiallyMaliciousInput;
// This is safe:
//const element = <h1>{title}</h1>;


// 使用JSX指定属性（html的属性在react-dom变成驼峰命名）
//const element = <div tabIndex="0"></div>;
//const element = <img src={user.avatarUrl}></img>;
//const element = <img src={user.avatarUrl} />; 不带结束标签
// JSX标记可能包含子代：
const elementDiv = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

const elementName = (
  <h1>
    element ，你的全名叫= {getGreeting(user)}？
  </h1>
  
);

//JSX代表对象 == const element = (<h1 className="greeting">Hello, world!</h1>);
const elementObj = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
// 上面的创建对象最后生成const element = {type: 'h1',props: {className: 'greeting',children: 'Hello, world!'}};

ReactDOM.render(
  elementName, // 渲染引入定义的值
  elementDiv,
  document.getElementById('root')
);

// import React, { Component } from 'react';

// export default class App extends Component {
//    render() {

//        return (
//            <div>
//                <HelloWorld name="Someone :)"/>
//            </div>
//        );
//    }
// }

// const HelloWorld = (props) => <div>Hello {props.name}</div>

// import React, { Component } from 'react';

// export default class App extends Component {
//    state = {
//        name: 'Someone :)'
//    }

//    onClick = () => this.setState({ name: 'You' })

//    render() {
//        return (
//            <div>
//                <HelloWorld name={this.state.name} onClick={this.onClick}/>
//            </div>
//        );
//    }
// }

// const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>
